<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: DOMElement Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var stage, container;

	function init() {
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		container = new createjs.Container();
		stage.addChild(container);

		var frame = new createjs.Shape();
		frame.graphics.beginFill("#F00").drawRect(0, 0, 300, 300);
		frame.regX = 150;
		frame.regY = 150;

		var content = new createjs.DOMElement("foo");
		content.regX = 140;
		content.regY = 140;
		//content.visible = false;

		container.addChild(frame, content);
		container.x = 480;
		container.y = 150;
		container.alpha = 0.8;
		container.rotation = -45;
		//container.visible = false;

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		container.rotation += event.delta * 0.01;
		container.alpha = 0.5 * (1 + Math.cos(container.rotation * 0.01));
		stage.update(event);
	}

</script>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>DOMElement</h1>

	<p>Simple example of using <code>DOMElement</code> to position HTML content
		within the EaselJS display list. Note how the black
		<code>DOMElement</code> can display outside the canvas boundaries,
		whereas the red <code>Shape</code> cannot.</p>
</header>

<div>
	<div id="foo"
		 style="z-index: 1; position: absolute; background-color: #111; color:#FFF; width:260px; height:260px; padding: 10px; visibility: hidden;">
		<b>Hello! I'm an HTML div.</b><br/><br/>
		I am not rendered to the canvas, but I can be included in the display
		list for positioning and transformations.<br/><br/>
		This means I can contain any HTML content (rich text, forms, video,
		etc), but I'm not a full part of the EaselJS display list.<br/><br/>
		<button id="btn" width="100" onclick="alert('hello')">This is a
			button!
		</button>
		<a href="http://easeljs.com/">This is a link</a>
	</div>
	<canvas id="testCanvas" width="960" height="300"></canvas>
</div>

</body>
</html>
